<template>
  <a-card>
    <div class="clear">
      <a-row>
        <a-col :span="24">
          <div class="table-container">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form-model layout="inline" v-bind="searchModelConfig" @keyup.enter.native="searchQuery">
              <a-row v-bind="searchRowConfig">
                <a-col v-bind="searchColConfig">
                  <a-form-model-item label="关键字">
                    <a-input placeholder="请输入要查询的内容" v-model="queryParam.searchName"></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="searchColConfig" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">搜索</a-button>
                  <a-button @click="searchReset" icon="reload">重置</a-button>
                </a-col>
              </a-row>
            </a-form-model>
          </div>

          <!-- 操作按钮区域 -->
          <div class="table-operator">
            <a-col style="display: inline-block; ">
              <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
              <a-button @click="handleEdit(selectionRows[0])" type="primary" icon="edit" :disabled="disEdit">修改</a-button>
              <a-button @click="batchDel" type="danger" icon="delete" :disabled="disDelete">删除</a-button>
              <a-button @click="refreshCache" type="primary">刷新缓存</a-button>
            </a-col>
          </div>

          <!-- table区域-begin -->
          <div>
            <a-table :row-selection="{
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange
              }" :columns="columns" :loading="loading" :data-source="dataSource"
              :rowKey="(record) => record.id" :pagination="ipagination" bordered :scroll="{x:'max-content'}">
              <span slot="isActiveFormat" slot-scope="text, record">
                <a-switch :checked="record.isActive === '1'" @change="confirmState(record)" />
              </span>
              <span slot="timeFormat" slot-scope="text, record">
                <span v-if="record.createTime">{{
                  formatDate(record.createTime, 'yyyy-MM-dd hh:mm:ss')
                }}</span>
              </span>
              <span slot="action" slot-scope="text, record">
                <ry-tooltip-button title="编辑" type="primary" icon="edit" @click="handleEdit(record)" />
                <ry-tooltip-button title="详情" type="primary" icon="eye" @click="handleView(record)" />
                <ry-tooltip-button title="删除" type="danger" icon="delete" @click="handleDelete(record.id)" />
              </span>
            </a-table>
          </div>
          <!-- table区域-end -->
          </div>
        </a-col>
      </a-row>
      <Modal ref="modalForm" :url="url" :status="status" @ModalOk="modalFormOk"></Modal>
    </div>
  </a-card>
</template>

<script>
import { RyListMixin } from '@/ryweb'
import Modal from './modules/UrlModal.vue'
import { formatDate } from '@/utils/util.js'
import { notification } from 'ant-design-vue'
export default {
  name: 'PermissionUrl',
  mixins: [RyListMixin],
  components: { Modal },
  data () {
    return {
      url: {
        list: this.$api.system.permissionUrl.permissionUrl, // post
        selectById: this.$api.system.permissionUrl.byId, // get
        add: this.$api.system.permissionUrl.insert, // post
        edit: this.$api.system.permissionUrl.update, // post
        delete: this.$api.system.permissionUrl.delete, // post
        deleteBatch: this.$api.system.permissionUrl.delete, // post
        refreshCache: this.$api.system.permissionUrl.refreshCache // get
      },
      columns: [
        {
          title: '接口名称',
          align: 'center',
          dataIndex: 'reqName'
        },
        {
          title: '请求url',
          align: 'center',
          dataIndex: 'reqUrl'
        },
        {
          title: '是否生效',
          dataIndex: 'isActive',
          align: 'center',
          scopedSlots: { customRender: 'isActiveFormat' }
        },
        {
          title: '请求url描述',
          dataIndex: 'description',
          align: 'center',
          ellipsis: true
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'timeFormat' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      status: [
        { isActive: '1', label: '是' },
        { isActive: '0', label: '否' }
      ],
      formatDate: formatDate,
      title: ''
    }
  },
  created () {

  },
  methods: {
    // 停用启用确认弹窗
    confirmState (record) {
      if (record.isActive === '1') {
        record.isActive = '0'
        this.title = '停用'
      } else {
        record.isActive = '1'
        this.title = '启用'
      }
      this.$confirm({
        title: '确认 【' + this.title + '】 该项？',
        icon: 'question-circle',
        centered: true,
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk: () => {
          this.changeState(record) // 确认按钮的回调方法
        },
        onCancel () {
          record.isActive === '1'
            ? (record.isActive = '0')
            : (record.isActive = '1')
        }
      })
    },
    // 修改状态
    changeState (record) {
      this.$post(this.url.edit, record).then((res) => {
        if (this.isSuccess(res)) {
          notification.success({
            message: this.title + '成功',
            duration: 4
          })
        }
      })
    },
    refreshCache () {
      this.$get(this.url.refreshCache).then((res) => {
        if (this.isSuccess(res)) {
          this.$message.success('刷新成功')
        }
      })
    }
  }
}
</script>

<style lang='less'>
.table-operator {
  display: flex;
  justify-content: space-between;
  align-content: center;
  .setting {
    margin-top: 5px;
    font-size: 16px;
    color: #00bbbb;
  }
}
.table-page-search-wrapper {
  margin-left: 0rem;
}
</style>
